<template>
  <div class="xiugaihaoma">
    <el-dialog title="修改生产号码" center :visible.sync="show" :close-on-click-modal="false" width="600px">
    	<div class="kflex"  style="margin-bottom: 20px;">
        <div>当前购买号码：{{shengchanhaoma || '无'}}</div>
        <!-- <div style="margin-left: 20px; cursor: pointer; color: #1989FA;" @click="shanchu">删除号码</div> -->
        <div style="margin-left: 20px; cursor: pointer; color: #1989FA;" @click="xiugaiing = true" v-if="!xiugaiing">修改</div>
        <div style="margin-left: 20px; cursor: pointer; color: #1989FA;" @click="xiugaiing = false" v-if="xiugaiing">放弃修改</div>
      </div>
      <div v-if="xiugaiing" style="margin-bottom: 20px;">
        <div  class="kflexc">
          <div>修改为：</div>
          <div><el-input placeholder="购买号码修改为" v-model="shengchanhaoma" @input="shurumobile"></el-input></div>
          <div>为空则表示随机使用号码</div>
        </div>
      </div>
      <div  style="margin-bottom: 10px;">请选择归属地：</div>
      <div  style="margin-bottom: 10px; width: 200px;">
        <diqu :cengshu="2" :sheng="obj.data.address_province" :shi="obj.data.address_city" @chuandizhi="chuandizhi" v-if="relo"></diqu>
      </div>
      <div class="kflex"  style="margin-bottom: 10px;">
        <div v-for="(item,index) in lianglist" :key="index"  @click="xuanzhong(item)" :class="tiaojian == item.rule_name?'act':''" style="background: rgb(224, 224, 224); cursor: pointer;  width: 80px; line-height: 32px; margin-bottom: 20px; margin-right: 10px; text-align: center; border-radius: 5px;">{{item.rule_name}}</div>
      </div>
      <div  style="margin-bottom: 10px;">请选择号码：</div>
      <div class="kflex">
        <div v-for="item in list" :key="item.mobile" @click="xuanzhong2(item)" :class="mobile == item.mobile?'act2':''"  style="border: 1px rgb(242, 242, 242) solid; background: rgb(242, 242, 242); padding: 10px 20px; cursor: pointer; margin-right: 20px; margin-bottom: 20px;" >{{item.mobile}}</div>
      </div>
    	<div slot="footer" class="dialog-footer">
    		<el-button type="info" round  @click="search(0)">仅保存</el-button>
        <el-button type="danger" round  @click="search(1)">保存并重提订单</el-button>
    	</div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import diqu from '../../productionDelivery/tongyidizhi/zidongshengchanguanli.vue'
  export default {
    name: 'piliangsousuo',
    props:['shengchanhaoma',"id","pick_number_rules","dingdan_id"],
    components:{diqu},
    data() {
      return {
        show:true,
        ids:[],
        title1:"",

        list:"",

        relo:true,

        obj:{
            "id": "",
            "data": {
                "id_card_num": "",
                "address_province": "",
                "address_city": "",
                "address_district": "",
                "page": 1,
                // "search_name": ""
            }
        },
        lianglist:"",
        nowchoosetagitem:"",
        nowchoosetag:"",
        btnsear:"",
        mobile:"",
        tiaojian:"",

        fanhuide:"",

        xiugaiing:false
      }
    },
    created() {
      this.obj.id = this.id

      if(this.pick_number_rules){
        var liang = []
        var ersearch = []
        for(var x = 0;x<this.pick_number_rules.length;x++){
        	if(this.pick_number_rules[x].rule_key=='second_search'){
            ersearch.push(this.pick_number_rules[x])
        	}else{
            liang.push(this.pick_number_rules[x])
        	}
        }

        this.lianglist = this.sortFun(liang,'sort','desc')
        this.nowchoosetagitem = this.sortFun(liang,'sort','desc')[0]
        console.log(this.lianglist)
        this.nowchoosetag = '0'
        this.btnsear = ersearch
      }
      this.gethaoma()
    },
    methods:{
      shurumobile:function(){
        this.mobile = this.shengchanhaoma
      },
      xiugai:function(){
        this.xiugaiing = true
      },
      sortFun:function(arr, name, type){
      	const compare = (prop) => {
      	return function(obj1, obj2) {
      		let val1 = obj1[prop];
      		let val2 = obj2[prop];
      		if (val1 < val2) {
      		return -1;
      		} else if (val1 > val2) {
      		return 1;
      		} else {
      		return 0;
      		}
      	}
      	}
      	if (type == 'desc') {
      	return arr.sort(compare(name));
      	} else {
      	return arr.sort(compare(name)).reverse();
      	}
      },
      xuanzhong2:function(item){
        console.log(item)
        //选中号码的处理
        this.mobile = item.mobile
        this.shengchanhaoma = item.mobile

        this.fanhuide = item
      },
      xuanzhong:function(item){
        console.log(item.rule_key)
        //选中搜索条件的处理

        if(this.obj.data[item.rule_key] == item.rule_name){
          delete this.obj.data[item.rule_key];
          this.tiaojian = ""
        }else{
          let obj = {
            "id_card_num": this.obj.data.id_card_num,
            "address_province": this.obj.data.address_province,
            "address_city": this.obj.data.address_city,
            "address_district": this.obj.data.address_district,
            "page": 1,
          }
          obj[item.rule_key] = item.rule_name
          this.tiaojian = item.rule_name
          this.obj.data = obj
        }

        // this.obj.data.search_name = item.rule_key

        this.gethaoma()
      },
      gethaoma:function(){
        //获取号码
        axios.post("/api/plan-market/upstream/query/number",this.obj)
          .then((response)=> {
            if(response.data.msg.code == 0){
              this.list = response.data.data
            }else{

            }
          })
      },
      //地市
      chuandizhi:function(val){
        this.obj.data.address_province = val.sheng
        this.obj.data.address_city = val.shi

        this.gethaoma()
      },
      shanchu:function(){
        this.$confirm('确定要删除号码吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj = {
            order_id:this.dingdan_id,
            is_delete:1
          }
          axios.post("/api/plan-market/order/select-mobile/set", obj)
          .then(response => {

          	if (response.data.msg.code == 0) {
          		this.$message({
          		message: "删除成功",
          			type: "success"
          		});
          		this.$emit('huoquhaoma',obj)

          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          });
        })
      },
      search:function(val){
        if(this.mobile == ''){
          this.shanchu()
        }else{
          let obj = {
            order_id:this.dingdan_id,
            plan_mobile:this.mobile,
            is_submit:0,
            is_delete:0,
            province:this.obj.data.address_province,
            city:this.obj.data.address_city,
            take_num_params:this.fanhuide,
          }
          if(val == 1){
            obj.is_submit = 1
          }
          axios.post("/api/plan-market/order/select-mobile/set", obj)
          .then(response => {

          	if (response.data.msg.code == 0) {
          		this.$message({
          		message: "保存成功",
          			type: "success"
          		});
          		this.$emit('huoquhaoma',obj)

          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          });
        }



      },
    }
  }
</script>

<style lang="scss" scoped>
  .xiugaihaoma {
    .act{ background: rgb(255, 0, 62) !important; color: #fff !important;}
    .act2{ border: 1px #FE0E2F solid !important; }
  }
</style>
